<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 引入Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!--引入zyp的css-->
  <link rel="stylesheet" href="css/zyp.css">
  <link rel="stylesheet" href="plugins/elementUI/index.css">
</head>


<body class="hold-transition sidebar-mini" style="width: 100%;">
  
  <!-- 表单设计 -->
  <div id="erp"> 
        <!-- 导航栏 -->
        <div style="background-color: white; position: relative; top: 2px;">
            <ul class="nav nav-pills nav-stacked" >
                <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                        表单设计
                    </a> 
                    <ul class="dropdown-menu"> 
                        <li><a>表单配置</a></li> 
                    </ul> 
                </li> 
                <li><a href="#">属性管理</a></li>
                <li><a href="#">菜单管理</a></li>
            </ul>
        </div>
        
        <!-- 主要部分 -->
        <!--左边-->
        <div style="width: 20%; background-color: #f2f2f2; height: 650px; margin-top: 15px; margin-left: 15px; float: left;">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                style="border-radius: 5px;margin-right: 5px;">
              <el-menu-item index="1" style="margin-bottom: 10px; background-color: white; border-radius: 5px;">
                <i class="glyphicon glyphicon-th-large"></i>
                <span slot="title">仓库管理</span>
              </el-menu-item>
              <el-menu-item index="2" style="margin-bottom: 10px; background-color: white; border-radius: 5px;">
                <i class="glyphicon glyphicon-stop"></i>
                <span slot="title">物料管理</span>
              </el-menu-item>
              <el-menu-item index="3" style="margin-bottom: 10px; background-color: white; border-radius: 5px;">
                <i class="glyphicon glyphicon-signal"></i>
                <span slot="title">销售管理</span>
              </el-menu-item>
              <el-menu-item index="4" style="margin-bottom: 10px; background-color: white; border-radius: 5px;">
                <i class="glyphicon glyphicon-sort"></i>
                <span slot="title">调拨管理</span>
              </el-menu-item>
              <el-menu-item index="5" style="margin-bottom: 10px; background-color: white; border-radius: 5px;">
                <i class="glyphicon glyphicon-duplicate"></i>
                <span slot="title">订单管理</span>
              </el-menu-item>
            </el-menu>
        </div>
        <!--右边-->
        <div style="width: 77%; background-color: #f2f2f2; height: 650px; margin-top: 15px; margin-right: 15px; float: left;">
           <!--入库管理-->
            <div style="height: 170px; width: 49%; background-color: white; border-radius: 5px; float: left;  margin-bottom: 15px;">
                <table class="table" >
                    <thead>
                      <tr>
                        <th  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-equalizer"></i>
                            入库管理
                        </th>
                        <th style="text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-th-large"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-pencil"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-cog"></i>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            黄金首饰
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            戒子配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            钻石配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                    </tbody>
                  </table>
            </div>
            <!--出库管理-->
            <div style="height: 170px; width: 49%; background-color: white; border-radius: 5px; float: right; margin-bottom: 15px;">
                <table class="table" >
                    <thead>
                      <tr>
                        <th  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-equalizer"></i>
                            出库管理
                        </th>
                        <th style="text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-th-large"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-pencil"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-cog"></i>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            黄金首饰
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            戒子配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            钻石配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                    </tbody>
                  </table>
            </div>
            <!--库存管理-->
            <div style="height: 170px; width: 49%; background-color: white; border-radius: 5px; float: left; margin-bottom: 15px;">
                <table class="table" >
                    <thead>
                      <tr>
                        <th  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-equalizer"></i>
                            库存管理
                        </th>
                        <th style="text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-th-large"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-pencil"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-cog"></i>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            黄金首饰
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            戒子配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            钻石配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                    </tbody>
                  </table>
            </div>
            <!--分称管理-->
            <div style="height: 170px; width: 49%; background-color: white; border-radius: 5px; float: right; margin-bottom: 15px;">
                <table class="table" >
                    <thead>
                      <tr>
                        <th  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-equalizer"></i>
                            分称管理
                        </th>
                        <th style="text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-th-large"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-pencil"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-cog"></i>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            黄金首饰
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            戒子配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            钻石配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                    </tbody>
                  </table>
            </div>
            <!--商品转换-->
            <div style="height: 170px; width: 49%; background-color: white; border-radius: 5px; float: left; margin-bottom: 15px;">
                <table class="table" >
                    <thead>
                      <tr>
                        <th  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-equalizer"></i>
                            商品转换
                        </th>
                        <th style="text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-th-large"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-pencil"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-cog"></i>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            黄金首饰
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            戒子配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                      <tr>
                        <td  style="padding: 11px; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-list"></i>
                            钻石配件
                        </td>
                        <td  style="padding: 11px; text-align: right; color: rgb(156, 154, 154);">
                            <i class="glyphicon glyphicon-calendar"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-list-alt"></i>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="el-icon-printer"></i>
                        </td>
                      </tr>
                    </tbody>
                  </table>
            </div>



        
        </div>
</div>



<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard3.js"></script>
<!-- 引入vue -->
<script src="plugins/vue-2.6.10/vue-2.6.10/vue-resource.min.js"></script>
<script src="plugins/vue-2.6.10/vue-2.6.10/vue.js"></script>
<!--引入ElementUi-->
<script src="plugins/elementUI/index.js"></script>
<!-- zyp的script-->
<script>
    $(function(){
       var wer = new Vue({
            el:"#erp",
            data() {
               
            },
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                }
            }
        });
    })
   
</script>
</body>
</html>
